<template>
  <div class="rightTable">
    <div class="search  flex-wrap">
     <div class="flex">
      <p class="w-[200Px] mr-[10px] mb-[5px]">
        <el-input
          v-model="searchParams.blurry"
          placeholder="输入名称或者邮箱搜索"
          size="mini"
        ></el-input>
      </p>

      <p class="w-[250px] mr-[10px] mb-[5px]">
        <el-date-picker
          size="mini"
          v-model="searchParams.value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </p>

      <p class="w-[250px] mb-[5px]">
        <el-select
          v-model="searchParams.enabled"
          placeholder="状态"
          size="mini"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
     <el-button
        class="mb-[5px]"
        type="success"
        icon="el-icon-search"
        size="mini"
        @click="getUserList"
        >搜索</el-button
      >
      <el-button
        class="mb-[5px]"
        type="warning"
        icon="el-icon-search"
        size="mini"
        >重置</el-button
      >
     </div>

      <div>
        <!-- -------------------- -->
        <el-button type="primary" icon="el-icon-search" size="mini" @click="dialogVisible = true">新增</el-button
          >
        <el-dialog
          title="新增用户"
          :visible.sync="dialogVisible"
          width="570px"
        >
        <popover></popover>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- -------------------------- -->

        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.tag }}</el-tag
          >
        </template>
        <el-button type="success" plain icon="el-icon-search" size="mini"
          >修改</el-button
        >
        <el-button type="success" icon="el-icon-search" size="mini"
          >删除</el-button
        >
        <el-button type="warning" icon="el-icon-search" size="mini"
          >导出</el-button
        >
      </div>
    </div>
    <bdTable :tableTitle="tableTitle" :tableData="tableData"></bdTable>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pages.size"
      layout="total, prev, pager, next, sizes "
      :total="totalElements"
    >
    </el-pagination>
  </div>
</template>

<script>
import popover from './popover.vue'
import { getUsers } from '@/api/user.js'
// import leftTreeVue from './leftTree.vue'

export default {
  components: { popover },
  data () {
    return {
      dialogVisible: false,
      //
      // 搜索参数
      searchParams: {
        // 模糊搜索
        blurry: '',
        value2: '',
        // 启用停用
        enabled: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      options: [
        {
          label: '激活',
          value: true
        },
        {
          label: '禁用',
          value: false
        }
      ],
      // 表头
      selection: true,
      tableTitle: {
        head: [
          {
            label: '用户名',
            prop: 'username',
            type: 'text'
          },
          {
            label: '昵称',
            type: 'text',
            prop: 'nickName'
          },
          {
            label: '性别',
            prop: 'gender',
            type: 'text'
            // filter: (row) => {
            //   return row.sex === 1 ? '男' : '女'
            // }
          },
          {
            label: '电话',
            type: 'text',
            prop: 'phone'
          },
          {
            label: '邮箱',
            type: 'text',
            prop: 'email'
          },
          {
            label: '部门',
            type: 'text',
            prop: 'dept',
            filter: (row) => {
              return row.dept.name
            }
          },
          {
            label: '状态',
            type: 'switch',
            prop: 'enabled',
            onChange: ($event, { row }) => {
              console.log($event, row)
            }
          },
          {
            label: '创建时间',
            type: 'text',
            prop: 'createTime'
          },
          {
            label: '操作',
            width: 180,
            type: 'btn',
            btn: [
              {
                name: '编辑',
                icon: 'el-icon-edit',
                type: 'success',
                handlerClick: (row) => {
                  console.log(row)
                }
              },
              { name: '删除' }
            ]
          }
        ]
      },
      tableData: [],
      // 分页
      pages: {
        page: 1,
        size: 10
      },
      // 分页的条数
      totalElements: 0
    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 新增
    // 获取用户数据
    getUserList () {
      const params = {
        ...this.searchParams,
        ...this.pages,
        page: this.pages.page - 1
      }
      getUsers(params).then((res) => {
        const { content, totalElements } = res
        this.tableData = content
        this.totalElements = totalElements
      })
    },
    // 分页的条数
    handleSizeChange (size) {
      this.pages.size = size
      this.getUserList()
    },
    // 分页页数
    handleCurrentChange (page) {
      this.pages.page = page
      this.getUserList()
    }
  }
}
</script>

  <style>
.el-range-editor--mini.el-input__inner {
  width: 250px;
}
.el-date-editor .el-range-separator {
  padding: 0;
}
.el-button--success.is-plain {
    margin-left: 10px;
}
</style>
